<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .show1{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
    .show2{
        width: 400px;
        height: 400px;
        background-color: brown;
    }
</style>
<script src="./jquery.js"></script>
<body>
    <img id="icon" src="./favicon.ico" alt="小米">
    <input type="checkbox" checked="true" name="name" id="name">
  <div id="divs" class="" style="width: 200px;height: 200px;background-color: red;" >sasa</div>
    
    <p id="p_id">唐玮</p>
    <input type="text" id="inptn">
    <input type="text" name="" id="">


    <select id="single">
        <option>Single</option>
        <option>Single2</option>
      </select>
      <select id="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
      </select><br/>
      <input type="checkbox" value="check1"/> check1
      <input type="checkbox" value="check2"/> check2
      <input type="radio" value="radio1"/> radio1
      <input type="radio" value="radio2"/> radio2
    <script>
        //添加属性
      
            // $("#icon").attr("src","./fenche.png")
     
        console.log($("#icon").attr("src"));
        //删除属性
        // $("#icon").removeAttr("src")

        //检测属性的true或fasle input的checkbox是否选中
        console.log($("input[name='name']").prop("checked"));//true

        //改属性
         $("input[name='name']").prop({
              name:"唐玮",
              checked:false
         });
         console.log($("input[name='name']").prop("checked"));


         //给div添加类
    // $("#divs").addClass("show");

    //点击div切换class
  let count=2;
    $("#divs").click(()=>{
        $("#divs").toggleClass(()=>{
            if(count%2==0){
                return "show1";
                count++;
            }
            if(count%2!=0) return "show2";
        })
    })

    //html属性
    console.log($("#p_id").html());//唐玮
    //使用回调函数设置html
    $("#p_id").html(`<p>小微</p>`)
    
    //text内容文本内容


    //input的value val
    // $("#inptn").focus(()=>{
    //     $("#inptn").val("输入数字")
    // })
 


    //设置select
    $("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
    </script>
</body>
</html>